import QtQuick 2.1
import QtQuick.Window 2.1
import qt.model.test 1.0
import QtQuick.Controls 1.0

Window {
    visible: true
    width: 360
    height: 360
    objectName: "rootItem";
    Component{
        id: listViewCmp
        ListView{
            model: stringModel;
            delegate: Item{
                width: parent.width;
                height: 60;
                Text{
                    id: label
                    anchors.centerIn: parent
                    text : '<b>Name:</b>' +name + ' ' +
                           '<b>City:</b>'+ city + ' ' +
                           '<b>Score:</b>'+ score;
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: parent.ListView.view.currentIndex = index;
                }
            }
            highlight: Rectangle{
                radius: 5
                color: "lightblue";
            }
        }       
    }

    Component{
        id: gridViewCmp
        GridView{
            model: stringModel;
            delegate: Item{
                width: 100; height: 100
                Text{
                    id: label
                    anchors.centerIn: parent
                    text : '<b>Name:</b>' +name + '<br>' +
                           '<b>City:</b>'+ city + '<br>' +
                           '<b>Score:</b>'+ score;
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: parent.GridView.view.currentIndex = index;
                }
            }
            highlight: Rectangle{
                radius: 5
                color: "lightblue";
            }
        }
    }

    ListModel{
        id: listModel;
        objectName: "listModel";
        ListElement{
            name: "jack";
            city: "ShangHai";
        }

        ListElement{
            name: "rose";
            city: "SuZhou";
        }

        ListElement{
            name: "david";
            city: "New York";
        }

        ListElement{
            name: "tom";
            city: "BeiJing";
        }
    }

    StringModel{
        id: stringModel;
        objectName: "stringModel";
    }

    Loader{
        id: listViewLoader;
        objectName: "listViewLoader";
        anchors.left: parent.left;
        anchors.top: parent.top;
        width: parent.width;
        height: parent.height-20
    }

    Loader{
        id: gridViewLoader;
        anchors.left: parent.left;
        anchors.top: parent.top;
        width: parent.width;
        height: parent.height-20
    }

    Button{
        id: gridBtn;
        objectName: "gridBtn";
        anchors.left: parent.left;
        anchors.leftMargin: 5;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 5;
        text: "GridView";
        onClicked: {
            gridViewLoader.sourceComponent = gridViewCmp;
            listViewLoader.sourceComponent = undefined;
            gridBtn.enabled = false;
            listBtn.enabled = true;
        }
    }

    Button{
        id: listBtn
        objectName: "listBtn"
        anchors.right: parent.right;
        anchors.rightMargin: 5
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 5
        text: "ListView";
        onClicked: {
            gridViewLoader.sourceComponent = undefined;
            listViewLoader.sourceComponent = listViewCmp;
            gridBtn.enabled = true;
            listBtn.enabled = false;
        }
    }

    Button{
        id: addBtn
        objectName: "addBtn";
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 5;
        text: "Add";
        onClicked: {
            stringModel.addItem(0, "luchu", "SuZhou","80");
        }
    }

    Component.onCompleted: {
        gridViewLoader.sourceComponent = undefined;
        listViewLoader.sourceComponent = listViewCmp;
        gridBtn.enabled = true;
        listBtn.enabled = false;
    }
}
